<template>
  <div class="county-enterprise-tracking">
    <!-- 第一行：标题 -->
    <el-row style="margin-bottom: 20px;">
      <el-col>
        <h3>各县区企业年报情况跟踪</h3>
      </el-col>
    </el-row>

    <!-- 第二行：年度选择下拉框 -->
    <el-row style="margin-bottom: 20px;">
      <el-col :span="8">
        <el-select v-model="selectedYear" placeholder="请选择年度" style="width: 100%;" @change="handleYearChange">
          <el-option
            v-for="year in availableYears"
            :key="year"
            :label="year + '年'"
            :value="year">
          </el-option>
        </el-select>
      </el-col>
    </el-row>

    <!-- 第三行：垂直柱状图 -->
    <div class="chart-container" v-loading="loading">
      <div ref="chartRef" style="width: 100%; height: 300px;"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, onUnmounted } from 'vue'
import { getCountyTrackingData } from '@/api/annual-report'
import * as echarts from 'echarts'

// 可选年份
const availableYears = ref([2020, 2021, 2022, 2023, 2024])
// 选中的年份
const selectedYear = ref(2024)
const loading = ref(false)
const chartRef = ref(null)
let chartInstance = null

// 图表数据
const chartData = ref([
  { county: '淮安区', reportRate: 85 },
  { county: '淮阴区', reportRate: 78 },
  { county: '清江浦区', reportRate: 92 },
  { county: '洪泽区', reportRate: 75 },
  { county: '涟水县', reportRate: 80 },
  { county: '盱眙县', reportRate: 70 },
  { county: '金湖县', reportRate: 82 },
  { county: '开发区', reportRate: 88 },
  { county: '工业园区', reportRate: 76 }
])

// 初始化图表
const initChart = () => {
  if (chartRef.value) {
    chartInstance = echarts.init(chartRef.value)
    updateChart()
  }
}

// 更新图表
const updateChart = () => {
  if (!chartInstance || !chartData.value) return

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: chartData.value.map(item => item.county),
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} %'
      }
    },
    series: [{
      name: '年报百分比',
      type: 'bar',
      barWidth: '60%',
      data: chartData.value.map(item => item.reportRate),
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2378f7' },
            { offset: 0.7, color: '#2378f7' },
            { offset: 1, color: '#83bff6' }
          ])
        }
      }
    }]
  }

  chartInstance.setOption(option)
}

// 处理窗口大小变化
const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize()
  }
}

// 处理年份切换
const handleYearChange = (year) => {
  fetchTrackingData(year)
}

// 获取各县区企业年报情况跟踪数据
const fetchTrackingData = async (year) => {
  loading.value = true
  try {
    const res = await getCountyTrackingData({ year: year })
    if (res.data) {
      chartData.value = res.data
      updateChart()
    }
  } catch (error) {
    console.error('获取各县区企业年报情况跟踪数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 监听数据变化
watch(chartData, () => {
  updateChart()
})

// 初始化加载数据
onMounted(() => {
  initChart()
  fetchTrackingData(selectedYear.value)
  window.addEventListener('resize', handleResize)
})

// 组件卸载前清理
onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose()
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.county-enterprise-tracking {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.chart-container {
  height: 300px;
}
</style>